<template>
  <div class="ipt">
    <div class="add">
      编号:<input type="text" v-model="code" /> 品牌名称:<input
        type="text"
        v-model="productName"
      />
      <br />
      产品图片地址:<input type="text" v-model="imgSrc" />

      价格:<input type="text" v-model="price" />
      <button @click="add">添加</button>
    </div>

    <div class="add">
      品牌名称:<input type="text" placeholder="请输入搜索条件" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      code: "",
      productName: "",
      imgSrc: "",
      price: "",
    };
  },
  methods: {
    add() {
      //非空验证
      if (!this.code || !this.imgSrc || !this.price || !this.productName) {
        return;
      }
      //声明一个对象
      let obj = {
        id: Math.random().toString(32).substring(2),
        code: this.code,
        productName: this.productName,
        imgSrc: this.imgSrc,
        price: this.price,
        total: this.price,
        count: 1,
      };

      this.$emit("add", obj);

      //清空输入框

      this.code = "";
      this.price = "";
      this.productName = "";
      this.imgSrc = "";
    },
  },
};
</script>
